Variable可以儲存value，讓code更好維護。

在一間公司可能有公司代表的主要顏色，
會被使用在everywhere，

header {
  background-color: #ac0000;
  font-size: 40px;  
}

.content {
  background-color: #ac0000;
  color: #550000;
}

今天老闆想要把顏色換成#cc0000，
雖然只有一個字要改，
但如果有100處，得要改100次，
或是可以ctrl+h 取代。

如果使用variable，
可以很容易解決這個問題。

@main-color :#ac0000;

header {
  background-color: @main-color;
  font-size: 40px;  
}

.content {
  background-color: @main-color;
  color: #550000;
}

把 #ac0000存到 @main-color這個變數中，
就可以直接使用這個變數來當作值，

header {
  background-color: #ac0000;
  font-size: 40px;
}
.content {
  background-color: #ac0000;
  color: #550000;
}

如果今天要稍作修改顏色，
直接修改變數就可以了。

此外，變數還可以做運算：

@main-color :#ac5712;

header {
  background-color: @main-color;
  font-size: 40px;  
}

.content {
  background-color: @main-color / 3;
  color: @main-color * 0.8;
}

header {
  background-color: #ac5712;
  font-size: 40px;
}
.content {
  background-color: #391d06;
  color: #8a460e;
}

Variable Interpolation

變數不只可用在控制css 的value，
也可以用於 selector、url、properties：

@main-color: #ac5712;
// 用於properties
@t: text;
// 用於urls
@img-link: "../../images/";
// 用於selectors
@headSelector: header;


@{headSelector} {
  background-color: @main-color;  
  font-size: 40px;   
  @{t}-align: center; 
  // 用於properties
  @{t}-decoration: none; 
  // 用於properties
  background: url("@{img-link}main.png"); 
  // 用於url
}

.content {
  background-color: @main-color;
  color: @main-color;
  background: url("@{img-link}content.svg"); 
  // 用於url
}

compile後的結果：

header {
  background-color: #ac5712;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  background: url("../../images/main.png");
}
.content {
  background-color: #ac5712;
  color: #ac5712;
  background: url("../../images/content.svg");
}

Variable Variables

在Less中，可以使用variable來定義variable。

@foo: #ffffff;

.content {
  @color: foo;
  span {
    background-color: @@color;
  }
}

compile後的結果：

.content span {
  background-color: #ffffff;
}

Lazy Evaluation

變數使用前不用先宣告，可以在使用後再行宣告既可。
如果一個變數被宣告兩次，
只會使用最後被宣告的變數。

.content {
  color: @foo;  
}
@foo: #ffffff;
@foo: #000000;

compile後的結果：

.content {
  color: #000000;
}

Less會從當前scope中向上搜索變數，

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var; 
    // 會找到後宣告的@var: 3
    @var: 3;
  }
  one: @var; 
  // 會找到同一個scope的@var: 1
}

compile後的結果：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}

##Properties as Variables

也可以將css的properties當作變數來使用?!
必須寫成$properties

.content {
  color: #acacac;
  background-color: $color;  
  height: 20px;
  line-height: $height;
}

compile後的結果：

.content {
  color: #acacac;
  background-color: #acacac;
  height: 20px;
  line-height: 20px;
}

接觸preprocessor並不多，
雖然variable很方便，
像是用於urls可以省掉少寫很多路徑。

但其他有些功能看似有點脫褲子放屁，
像是Properties as Variables、Lazy Evaluation，

如果前輩你看到這邊
這些功能或是特性在實作上是不是真的會使用到呢？

參考資料
lesscss.org